<template>
  <section class="header-container header">
    <div class="left-nav">
    </div>    
    <div class="right-nav">
      <d-search id="search" style="margin-right: 8px;" v-model="search" icon-position="left" size="sm" :no-border="true"></d-search>
      <div class="theme">
        <!-- MateChat入口 -->
        <img :class="['opt', {'active': props.drawerOpen}]" @click="openDrawer()" src="../assets/logo.svg">
        <div class="opt">
          <d-icon name="dark" color="var(--devui-text)" @click="changeTheme()">
            <template #suffix>
            </template>
          </d-icon>
        </div>
        <div style="display: flex; align-items: center; gap: 20px; margin-left: 20px; cursor: pointer; font-size: 14px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <d-avatar :name="'admin'" :width="22" :height="22"></d-avatar>
            <span>Admin</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue';
import { themeServiceInstance } from '../main';
import { infinityTheme, galaxyTheme } from 'devui-theme';

const props = defineProps(['drawerOpen']);
const theme = ref('dark');
const emit = defineEmits(['openDrawer']);

const openDrawer = () => {
  emit('openDrawer');
  setTimeout(() => {
  }, 5000);
}
const search = ref('');
const changeTheme = () => {
  const currentTheme = localStorage.getItem('theme');
  if (currentTheme === 'infinity-theme' || !currentTheme) {
    theme.value = 'light';
    localStorage.setItem('theme', 'galaxy-theme');
    themeServiceInstance?.applyTheme(galaxyTheme);
  } else {
    theme.value = 'dark';
    localStorage.setItem('theme', 'infinity-theme');
    themeServiceInstance?.applyTheme(infinityTheme);
  }
}

onMounted(() => {
  let currentTheme = localStorage.getItem('theme');
  theme.value = (!currentTheme || currentTheme === 'infinity-theme') ? 'dark' : 'light ';
})
</script>

<style lang="scss" scoped>
@use 'devui-theme/styles-var/devui-var.scss' as *;
.header {
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  width: calc(100% - 240px);
  height: 48px;
  background-color: $devui-base-bg;
  transition: 0.5s;

  img {
    height: 32px;
    margin: 8px 20px;
    cursor: pointer;
  }

  .left-nav {
    display: flex;
    align-items: center;
    button {
      display: none;
    }
  }

  .right-nav {
    display: flex;
    align-items: center;

    .nav-list {
      margin-right: 24px;

      & > a:not(:first-child) {
        margin-left: 12px;
      }

      & > a {
        text-decoration: none;
      }

      .nav-active {
        color: $devui-link-active;
      }
    }
  }

  .theme {
    display: flex;
    margin-right: 20px;
    align-items: center;
    .opt {
      padding: 5px;
      cursor: pointer;
      transition: 0.5s;
      border-radius: 25%;
    }
  }
}

.active {
  background: $devui-list-item-hover-bg;
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  border-radius: $devui-border-radius-card;
}
</style>

<style>
.devui-drawer {
  top: 49px;
}
</style>